// pages/address/address.js
import QQMapWX from '../../utils/qqmap-wx-jssdk.min'
import { fetch } from '../../utils/fetch'
/**
 * 获取到当前的经纬度，然后根据经纬度，拿到地址的汉语位置。然后渲染
 */
Page({
  /**
 * 页面的初始数据
 */
  data: {
    mapOptions: {
      latitude: "",
      longitude: "",
    },
    address: '',
    radio: '1',
    tags: ['家', '公司', '学校'],
    // 地址表单数据 - 不能写成对象形式，因为使用了双向绑定
    houseNumber: "",
    phone: "",
    consignee: "",
    gender: '',
    errorMessage: '',
    tabIndex: 0
  },
  // 标签切换
  handleTabClick(e) {
    console.log('tab:', e)
    const { index } = e.currentTarget.dataset;
    this.setData({ tabIndex: index })
  },
  // 地址表单数据
  async handleSaveAddress() {
    const phoneReg = /^1[3-9]\d{9}$/
    // 手机号正则校验
    if (phoneReg.test(this.data.phone)) {
      const response = await fetch('address', {
        address: {
          address: this.data.address, houseNumber: "",
          phone: this.data.phone,
          consignee: this.data.consignee,
          gender: this.data.gender,
          tag: this.data.tags[this.data.tabIndex]
        }
      })
      console.log('res:', response)
      // 提交数据给后台
      this.setData({ errorMessage: '' })
      // 跳转路由
      wx.showToast({
        title: '保存成功，即将跳转',
      })
      wx.navigateTo({
        url: '/pages/order/order',
      })
    } else {
      this.setData({ errorMessage: '手机号格式错误' })
    }
  },

  // 点击获取当前地址
  handleGetAddress() {
    this.getUserLocation()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  addressInfo(response) {
    this.qqmapsdk = new QQMapWX({
      key: "EZVBZ-GXFOG-U7ZQF-IQGVJ-E34W6-VZFYE"
    })
    // 地图逆向转换地址
    this.qqmapsdk.reverseGeocoder({
      location: {
        latitude: response.latitude,
        longitude: response.longitude
      },
      success: (res) => {
        console.log('res:地图位置转换', res.result.address)
        this.setData({ address: res.result.address })
      }
    })
  },

  // 获取用户地址
  async getUserLocation() {
    try {
      const response = await wx.getLocation()
      console.log('response:', response)
      this.addressInfo(response)
      this.setData({
        mapOptions: { ...response, iconPath: 'https://pic4.zhimg.com/v2-6163d0652cbb511fc47fda945206404b_r.jpg' }
      })
      console.log('this.mapoptions:', this.data.mapOptions)
      wx.showToast({
        title: '获取用户地理位置成功',
      })
    } catch (error) {
      wx.showToast({
        icon: "error",
        title: '获取用户地理位置失败，请重试',
      })
    }
  },

  handleSearchAddress() {
    wx.navigateTo({
      url: '/pages/search-address/index',
    })
  },





  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})